/* 成绩录入页面思路分析
1.页面一加载,发送ajax请求学员信息列表
2.点击分数td,给当前td动态添加一个input输入框
    * (1)td标签是动态新增的元素,需要注册委托事件
    * (2)学员id和姓名不能修改，只有分数才可以修改
    * (3)输入框默认显示当前点击的td的文本
3.输入框按enter键 : (1)获取输入框文本 (2)发送ajax请求  (3)移除输入框
*/
 
//1.页面一加载,发送ajax请求学员信息列表
const initData = () => {
    axios({
        url:'/score/list',
        method:'get',
    }).then(res=>{ 
        //成功回调
        console.log(res)
        let data = res.data.data
        // console.log(data);
        document.querySelector('tbody').innerHTML = Object.keys(data).map(item =>`
        <tr>
              <th scope="row">${item}</th>
              <td>${data[item].name}</td>
              <td class="score" data-stu_id="${item}" data-batch="1">${data[item].score[0]}</td>
              <td class="score" data-stu_id="${item}" data-batch="2">${data[item].score[1]}</td>
              <td class="score" data-stu_id="${item}" data-batch="3">${data[item].score[2]}</td>
              <td class="score" data-stu_id="${item}" data-batch="4">${data[item].score[3]}</td>
              <td class="score" data-stu_id="${item}" data-batch="5">${data[item].score[4]}</td>
        </tr>
        `).join('')
    })
}
initData()


/* 2.点击分数td,给当前td动态添加一个input输入框
    * (1)td标签是动态新增的元素,需要注册委托事件
    * (2)学员id和姓名不能修改，只有分数才可以修改
    * (3)输入框默认显示当前点击的td的文本 */
document.querySelector('tbody').addEventListener('click',function(e){
    if(e.target.classList.contains('score')){
        //2.动态创建input
        //(1)创建input标签
        const input = document.createElement('input')
        //(2)设置input类名inp,设置文本为当前td的分数
        input.classList.add('inp')
        input.value = e.target.innerText
        //(3)添加到点击分数td
        e.target.appendChild(input)
        //细节优化:
        //input.focus() //自动聚焦
        input.select() //自动选中

        //3.input失去焦点则移除
        input.addEventListener('blur',function(){
            this.remove()
        })

        //输入框的enter事件
        let td = e.target
        input.addEventListener('keydown',function(e){
            //(1)判断用户打的是不是enter键
            //(2)获取参数: stu_id batch score
            //(3)发送ajax请求: 成功重新加载列表 失败提示用户
            if(e.key == 'Enter'){
                /* let stu_id = e.target.parentNode.dataset.stu_id
                let batch = e.target.parentNode.dataset.batch */
                let stu_id = td.dataset.stu_id
                let batch = td.dataset.batch
                //或者用闭包
                let score = this.value
                axios({
                    url:'/score/entry',
                    method:'post',
                    data: { stu_id,batch,score},
                }).then(res=>{
                    //成功回调
                    console.log(res)
                    if(res.data.code==0){
                        Toast.success(res.data.message)

                        initData()
                    }
                }).catch(err=>{
                    Toast.fail('score必须范围在0~100')
                    //强迫症福音-掩耳盗铃 
                    setTimeout(()=>{
                        console.clear()
                    },3000)
                })
            }
        })
    }

})